<template>
  <view class="big">
    <view class="header"></view>
    <view class="btnClass">
      <view class="btnItem" @click="gotoDeatail(1)">
        <view class="itemImg1"></view>
        <view style="flex: 1">
          <h3>价格时效</h3>
          <p>运费估算/运输时效</p>
        </view>
        <view class="rightIcon"></view>
      </view>
      <view class="btnItem marTop8" @click="gotoDeatail(2)">
        <view class="itemImg2"></view>
        <view style="flex: 1">
          <h3>网点查询</h3>
          <p>网点信息/地址查询</p>
        </view>
        <view class="rightIcon"></view>
      </view>
      <!-- <view class="btnItem marTop8" @click="gotoDeatail(3)">
        <view class="itemImg3"></view>
        <view style="flex: 1">
          <h3>优惠卷</h3>
          <p>查看您的优惠卷</p>
        </view>
        <view class="rightIcon"></view>
      </view> -->
    </view>
  </view>
</template>
<script lang="ts" setup>
import Taro from "@tarojs/taro";

function gotoDeatail(num: number) {
  if (num == 1) {
    Taro.navigateTo({
      url: "/pages/serviceQuery/priceTimeliness/index",
    });
  } else if (num == 2) {
    Taro.navigateTo({
      url: "/pages/serviceQuery/outletQuery/index",
    });
  } else if (num == 3) {
    Taro.navigateTo({
      url: "/pages/serviceQuery/coupon/index",
    });
  }
}
</script>
<style lang="less">
.big {
  flex-direction: column;
  // align-items: center;
  // justify-content: center;
  background: #efefef;
  width: 100vw;
  height: 100vh;
  position: relative;

  .header {
    width: 100%;
    height: 622rpx;
    background: url("../../assets/images/index/服务查询/fuwuchaxun_img_bj.png") no-repeat;
    // background-attachment: fixed;
    background-size: contain;
    position: absolute;
    top: 0;
    z-index: 1;
  }

  .btnClass {
    position: absolute;
    top: 548rpx;
    left: 50%;
    margin-left: -351rpx;
    // background: red;
    height: 516rpx;
    width: 702rpx;
    z-index: 2;

    .btnItem {
      width: 100%;
      height: 148rpx;
      background: white;
      border-radius: 16rpx;
      display: flex;
      justify-content: space-between;
      padding: 32rpx;
      box-sizing: border-box;

      h3 {
        font-size: 32rpx;
        line-height: 48rpx;
        margin-left: 16rpx;
      }

      p {
        font-size: 24rpx;
        line-height: 32rpx;
        color: #999999;
        margin-left: 16rpx;
      }

      .itemImg1 {
        // margin-top: 32rpx;
        height: 80rpx;
        width: 80rpx;
        background: url("../../assets/images/index/服务查询/fuwuchaxun_icon_shixiaojiage.png") no-repeat;
      }

      .itemImg2 {
        // margin-top: 32rpx;
        height: 80rpx;
        width: 80rpx;
        background: url("../../assets/images/index/服务查询/fuwuchaxun_icon_wangdianchaxun.png") no-repeat;
      }

      .itemImg3 {
        // margin-top: 32rpx;
        height: 80rpx;
        width: 80rpx;
        background: url("../../assets/images/index/服务查询/fuwuchaxun_icon_youhuiquan.png") no-repeat;
      }

      .rightIcon {
        margin-top: 22rpx;
        height: 40rpx;
        width: 40rpx;
        border-radius: 40rpx;
        background-color: #f5f5f5;
        background: url("../../assets/images/index/rightIcon.png") no-repeat center;
      }
    }

    .marTop8 {
      margin-top: 16rpx;
    }
  }
}</style>
